<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>字典管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div style="padding: 16px;">
        <div class="layui-card">
            <div class="layui-card-body">

                <div class="layui-field-box">
                    <form class="layui-form layui-row layui-col-space16">
                        <div class="layui-col-md4">
                            <div class="layui-input-wrap">
                                <input type="text" name="dictName" placeholder="字典名称" lay-affix="clear"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <select name="status" lay-verify="">
                                <option value="">状态</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                        <div class="layui-btn-container layui-col-xs12">
                            <button class="layui-btn" lay-submit lay-filter="dict-page-table-search">搜索</button>
                            <button type="reset" id="dictReset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </form>
                </div>

                <table class="layui-hide" id="dictTable" lay-filter="dictTable"></table>
            </div>
        </div>
    </div>

    <!-- 字典头部工具栏 -->
    <script type="text/html" id="toolbarDictPage">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="syncCache">
                同步缓存  <i class="layui-icon layui-font-12"></i>
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="dictAdd">
                新增  <i class="layui-icon layui-icon-add-1 layui-font-12"></i>
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="batchDel">批量删除</button>
        </div>
    </script>
    <script type="text/html" id="dictBar">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs" lay-event="editDictItem">字典项</a>
            <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
        </div>
    </script>

    <!-- 字典项头部工具栏 -->
    <script type="text/html" id="toolbarDictItemPage">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="dictItemAdd">
                新增  <i class="layui-icon layui-icon-add-1 layui-font-12"></i>
            </button>
        </div>
    </script>
    <script type="text/html" id="dictItemBar">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="dictItemEdit">编辑</a>
            <a class="layui-btn layui-btn-xs" lay-event="dictItemDetail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="dictItemDel">删除</a>
        </div>
    </script>
    <script>
        layui.use(['table', 'dropdown', 'form', 'laydate'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var constants = layui.constants;
            var AjaxUtils = layui.AjaxUtils;
            var toast = layui.toast;
            var form = layui.form;
            var laydate = layui.laydate;
            var $ = layui.$;
            var tree = layui.tree;
            var treeTable = layui.treeTable;

            form.render();

            // 接口地址
            var dataApiUrl = constants.API_BASE_URL + "/dict/page";
            // 创建渲染实例
            table.render({
                elem: '#dictTable',
                url: dataApiUrl,
                method: 'post',
                contentType: 'application/json',
                toolbar: '#toolbarDictPage',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                headers: { 'token': localStorage.getItem("token") },
                request: {
                    pageName: 'pageNum', // 页码的参数名称，默认：page
                    limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
                },
                response: {
                    statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
                },
                page: true,
                size: 'lg',
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'dictName', width: '20%', title: '字典名称' },
                    { field: 'dictCode', width: '20%', title: '字典编码' },
                    { field: 'description', width: '20%', title: '字典描述' },
                    {
                        field: 'status', title: '状态', width: '10%', templet: function (d) {
                            if (d.status == 1) {
                                return '<span style="color: #36b368">启用</span>';
                            } else if (d.status == 0) {
                                return '<span style="color: #f56c6c">禁用</span>';
                            }
                            else {
                                alert("状态错误");
                            }
                        }
                    },
                    { field: 'createTime', width: '10%', title: '创建时间' },
                    { fixed: 'right', title: '操作', width: '20%', minWidth: 80, toolbar: '#dictBar' }
                ]],
                error: function (res, msg) {
                    toast.error({
                        message: msg,
                    });
                },
                complete: function (xhr, ts) {
                    if (xhr.responseJSON.code == 520) {
                        AjaxUtils.redirectToLogin();
                    }
                }
            });

            // 搜索提交
            form.on('submit(dict-page-table-search)', function (data) {
                // 获得表单字段
                var field = data.field;

                // 执行搜索重载
                table.reloadData('dictTable', {
                    page: {
                        curr: 1
                    },
                    where: field
                });
                return false; // 阻止默认 form 跳转
            });

            // 重置
            $("#dictReset").click(function (data) {
                table.reloadData('dictTable', {
                    where: {},
                    scrollPos: 'fixed',
                    page: { curr: 1, limit: 10 }
                });
            })


            // 工具栏事件
            table.on('toolbar(dictTable)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'batchDel':
                        var data = checkStatus.data;
                        if (data.length === 0) {
                            return layer.msg('至少选择一行');
                        }

                        // 获取对象ID
                        var ids = [];
                        for (var i = 0; i < data.length; i++) {
                            ids.push(data[i].id);
                        }

                        layer.confirm('确认批量删除吗？', {
                            btn: ['确定', '关闭'] //按钮
                        }, function () {
                            sureBatchDelUser(ids);
                        }, function () { });
                        break;
                    case 'dictAdd':
                        addUpdate('add');
                        break;
                    case 'syncCache':
                        syncCache();
                        break;
                };
            });



            // 触发单元格工具事件
            table.on('tool(dictTable)', function (obj) {
                var data = obj.data; // 获得当前行数据

                if (obj.event === 'edit') {
                    // 编辑
                    edit(data);
                }
                else if (obj.event === 'editDictItem') {
                    // 编辑字典项
                    editDictItem(data);
                }
                else if (obj.event === 'detail') {
                    // 查看
                    detail(data);
                }
                else if (obj.event === 'del') {
                    // 删除
                    del(data);
                }
            });

            // 新增，编辑，查看 弹框
            function addUpdate(operType, data) {
                if (operType == 'add') {
                    layer.open({
                        type: 1,
                        area: ['500px'],
                        title: false,
                        title: '字典新增',
                        shade: 0.6,
                        shadeClose: true,
                        anim: 'slideLeft',
                        closeBtn: 2,
                        content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                                    <div class="layui-form-item">
                                        <input type="text" name="dictName" value="" lay-verify="required" placeholder="字典名称" lay-reqtext="字典名称必填" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item">
                                        <input type="text" name="dictCode" value="" lay-verify="required" placeholder="字典编码" lay-reqtext="字典编码必填" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item">
                                        <input type="text" name="description"   placeholder="描述" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item">                                    
                                        <div class="layui-input-block" style="margin-left: 0;">
                                            <input type="checkbox" name="status" id="status" checked value="1" title="启用|禁用" lay-skin="switch">
                                        </div>
                                    </div>
            
                                    <div class="layui-form-item">
                                        <button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit lay-filter="dictAdd">确认</button>
                                    </div>
                                </div>`,
                        success: function (layero, index, that) {
                            // 对弹层中的表单进行初始化渲染
                            form.render();

                            // 表单提交事件
                            form.on('submit(dictAdd)', function (data) {
                                var field = data.field; // 获取表单字段值

                                // 获取复选框的值
                                var selectedValues = 1;
                                if ($('#status').is(':checked')) {
                                    // 选中
                                    selectedValues = 1;
                                } else {
                                    // 未选中
                                    selectedValues = 0;
                                }

                                var dictAddOrUpdate = {
                                    dictName: field.dictName,
                                    dictCode: field.dictCode,
                                    description: field.description,
                                    status: selectedValues
                                }

                                AjaxUtils.request(
                                    {
                                        url: '/dict',
                                        type: 'POST',
                                        data: dictAddOrUpdate
                                    }, function (data) {
                                        // 关闭弹层&刷新表格
                                        layer.close(index);

                                        // 重新加载表格
                                        table.reloadData('dictTable', {
                                            page: {
                                                curr: 1
                                            }
                                        });
                                    },
                                    function (errMsg) {
                                        toast.error({
                                            message: errMsg,
                                        });
                                    }
                                );
                                return false; // 阻止默认 form 跳转
                            });
                        }
                    });
                }

            }


            // 编辑
            function edit(data) {
                layer.open({
                    type: 1,
                    area: ['500px'],
                    title: false,
                    title: '字典编辑',
                    shade: 0.6,
                    shadeClose: true,
                    anim: 'slideLeft',
                    closeBtn: 2,
                    content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">

                                    <div class="layui-form-item layui-hide">
                                        <input type="text" name="id" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">角色名称</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="dictName" value="" lay-verify="required" placeholder="字典名称" lay-reqtext="字典名称必填" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字典编码</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="dictCode" value="" lay-verify="required" placeholder="字典编码" lay-reqtext="字典编码必填" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">描述</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="description"  placeholder="描述"autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">         
                                        <label class="layui-form-label">状态</label>
                                        <div class="layui-input-block">                           
                                        <div class="layui-input-block" style="margin-left: 0;">
                                            <input type="checkbox" name="status" id="status" checked value="1" title="启用|禁用" lay-skin="switch">
                                        </div></div>
                                    </div>
            
                                    <div class="layui-form-item">
                                        <button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit lay-filter="dictAdd">确认</button>
                                    </div>
                                </div>`,
                    success: function (layero, index, that) {
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        form.val('filter-test-layer', {
                            "id": data.id,
                            "dictName": data.dictName,
                            "dictCode": data.dictCode,
                            "description": data.description,
                            "status": data.status
                        });

                        // 表单提交事件
                        form.on('submit(dictAdd)', function (data) {
                            // 获取表单字段值
                            var field = data.field;

                            // 获取复选框的值
                            var selectedValues = 1;
                            if ($('#status').is(':checked')) {
                                // 选中
                                selectedValues = 1;
                            } else {
                                // 未选中
                                selectedValues = 0;
                            }

                            var dictEditObj = {
                                id: field.id,
                                dictName: field.dictName,
                                dictCode: field.dictCode,
                                description: field.description,
                                status: selectedValues
                            }
                            AjaxUtils.request(
                                {
                                    url: '/dict',
                                    type: 'POST',
                                    data: dictEditObj
                                }, function (data) {
                                    // 关闭弹层&刷新表格
                                    layer.close(index);

                                    // 重新加载表格
                                    table.reloadData('dictTable', {
                                        page: {
                                            curr: 1
                                        }
                                    });
                                },
                                function (errMsg) {
                                    toast.error({
                                        message: errMsg,
                                    });
                                }
                            );
                            // 阻止默认 form 跳转
                            return false;
                        });
                    }
                });
            }


            // 同步缓存
            function syncCache() {
                debugger
            }


            // 批量删除用户
            function sureBatchDelUser(dataList) {
                AjaxUtils.request(
                    {
                        url: '/dict/batch',
                        type: 'DELETE',
                        data: dataList
                    }, function (data) {
                        layer.msg('删除成功', { icon: 1 });

                        // 重新加载表格
                        table.reloadData('dictTable', {
                            page: {
                                curr: 1
                            }
                        });
                    },
                    function (error) {
                        toast.error({
                            message: error,
                        });
                    }
                );
            }

            // 查看
            function detail(data) {
                layer.open({
                    type: 1, // page 层类型
                    area: ['500px'],
                    title: false,
                    title: '角色详情',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    // maxmin: true, // 允许全屏最小化
                    anim: 'slideLeft', // 0-6 的动画形式，-1 不开启
                    closeBtn: 2,
                    content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字典名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="dictName" value="" lay-verify="required" placeholder="字典名称" readonly lay-reqtext="字典名称必填" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字典编码</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="dictCode" value="" lay-verify="required" placeholder="字典编码" readonly lay-reqtext="字典编码必填" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">描述</label>
                                        <div class="layui-input-block">
                                             <input type="text" name="description" placeholder="description"  readonly autocomplete="off" class="layui-input">
                                        </div> 
                                    </div>


                                    <div class="layui-form-item">      
                                        <label class="layui-form-label">状态</label>   
                                            <div class="layui-input-block">                           
                                            <div class="layui-input-block" style="margin-left: 0;">
                                                <input type="checkbox" name="status" disabled  title="启用|禁用" lay-skin="switch" >
                                            </div> 
                                        </div>
                                    </div>
                                </div>`,
                    success: function (layero, index, that) {
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        form.val('filter-test-layer', {
                            "dictName": data.dictName,
                            "dictCode": data.dictCode,
                            "description": data.description,
                            "status": data.status
                        });
                    }
                });
            }

            // 删除
            function del(data) {
                layer.confirm('确定删除 [' + data.dictName + '] 么', function (index) {
                    layer.close(index);

                    AjaxUtils.request(
                        {
                            url: '/dict/' + data.id,
                            type: 'DELETE'
                        }, function (data) {
                            layer.msg('删除成功', { icon: 1 });
                            // 重新加载表格
                            table.reloadData('dictTable', {
                                page: {
                                    curr: 1
                                }
                            });
                        },
                        function (error) {
                            toast.error({
                                message: error,
                            });
                        }
                    );
                });
            }

            // 字典ID
            var DICT_ID = null;

            // 编辑字典项
            function editDictItem(data) {
                //  字典ID赋值
                DICT_ID = data.id;

                layer.open({
                    title: '字典项',
                    type: 1,
                    area: ['1200px', '520px'],
                    content: '<div class="layui-card-body"><table class="layui-hide" id="setDictItem"></table></div>',
                    fixed: false, // 不固定
                    maxmin: true,
                    shadeClose: true,
                    btn: ['取消'],
                    btnAlign: 'c',
                    success: function (layero, index, that) {
                        treeTable.render({
                            elem: '#setDictItem',
                            url: constants.API_BASE_URL + "/dict/item-page/" + data.id,
                            headers: { 'token': localStorage.getItem("token") },
                            method: 'post',
                            contentType: 'application/json',
                            request: {
                                pageName: 'pageNum', // 页码的参数名称，默认：page
                                limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
                            },
                            response: {
                                statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
                            },
                            toolbar: '#toolbarDictItemPage',
                            cols: [[
                                { type: 'checkbox', fixed: 'left' },
                                { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                                { field: 'itemText', title: '字典项文本', width: 120, fixed: 'left' },
                                { field: 'itemValue', title: '字典项值', width: 120, fixed: 'left' },
                                { field: 'description', title: '描述', width: 200, fixed: 'left' },
                                { field: 'sortOrder', title: '排序', width: 40, fixed: 'left' },
                                {
                                    field: 'status', title: '状态', width: 80, templet: function (d) {
                                        if (d.status == 1) {
                                            return '<span style="color: #36b368">启用</span>';
                                        } else if (d.status == 0) {
                                            return '<span style="color: red">禁用</span>';
                                        } else {
                                            toast.error({
                                                message: '状态错误',
                                            });
                                        }
                                    }
                                },
                                { field: 'createTime', width: '180', title: '创建时间' },
                                { fixed: 'right', title: '操作', width: '220', minWidth: 80, toolbar: '#dictItemBar' }
                            ]],
                            error: function (res, msg) {
                                toast.error({
                                    message: msg,
                                });
                            },
                            complete: function (xhr, ts) {
                                if (xhr.responseJSON.code == 520) {
                                    AjaxUtils.redirectToLogin();
                                }
                            },
                            page: true,
                        });

                        table.on('tool(setDictItem)', function (obj) {
                            var data = obj.data; // 获得当前行数据

                            if (obj.event === 'dictItemEdit') {
                                // 编辑
                                dictItemEdit(data);
                            }
                            else if (obj.event === 'dictItemDetail') {
                                // 详情
                                dictItemDetail(data);
                            }
                            else if (obj.event === 'dictItemDel') {
                                // 删除
                                dictItemDel(data);
                            }
                        });

                        // 工具栏事件
                        table.on('toolbar(setDictItem)', function (obj) {
                            var id = obj.config.id;
                            var checkStatus = table.checkStatus(id);
                            var othis = lay(this);
                            switch (obj.event) {
                                case 'dictItemAdd':
                                    dictItemAddFuc();
                                    break;
                            };
                        });

                    },
                    btn1: function (index, layero, that) {
                        layer.close(index);
                    }
                });
            }

            // 字典项新增
            function dictItemAddFuc() {
                debugger;
                layer.open({
                    type: 1,
                    area: ['500px'],
                    title: false,
                    title: '字典项新增',
                    shade: 0.6,
                    shadeClose: true,
                    anim: 'slideLeft',
                    closeBtn: 2,
                    content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字典项文本</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="itemText" value="" lay-verify="required" placeholder="字典项文本" lay-reqtext="字典项文本必填"  autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字典编码</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="itemValue" value="" lay-verify="required" placeholder="字典编码" lay-reqtext="字典编码必填" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">描述</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="description"  placeholder="描述" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">排序</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="sortOrder"  placeholder="排序" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">         
                                        <label class="layui-form-label">状态</label>
                                        <div class="layui-input-block">                           
                                        <div class="layui-input-block" style="margin-left: 0;">
                                            <input type="checkbox" name="status" id="status" checked value="1" title="启用|禁用" lay-skin="switch">
                                        </div></div>
                                    </div>
            
                                    <div class="layui-form-item">
                                        <button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit lay-filter="dictItemAdd">确认</button>
                                    </div>
                                </div>`,
                    success: function (layero, index, that) {
                        // 对弹层中的表单进行初始化渲染
                        form.render();

                        // 表单提交事件
                        form.on('submit(dictItemAdd)', function (data) {
                            debugger
                            // 获取表单字段值
                            var field = data.field;

                            // 获取复选框的值
                            var selectedValues = 1;
                            if ($('#status').is(':checked')) {
                                // 选中
                                selectedValues = 1;
                            } else {
                                // 未选中
                                selectedValues = 0;
                            }

                            var dictItemAddObj = {
                                dictId: DICT_ID,
                                itemText: field.itemText,
                                itemValue: field.itemValue,
                                description: field.description,
                                sortOrder: data.sortOrder,
                                status: selectedValues
                            }

                            AjaxUtils.request(
                                {
                                    url: '/dict/item',
                                    type: 'POST',
                                    data: dictItemAddObj
                                }, function (data) {
                                    // 关闭弹层&刷新表格
                                    layer.close(index);

                                    // 重新加载表格
                                    table.reloadData('setDictItem', {
                                        page: {
                                            curr: 1
                                        }
                                    });
                                },
                                function (errMsg) {
                                    toast.error({
                                        message: errMsg,
                                    });
                                }
                            );
                            // 阻止默认 form 跳转
                            return false;
                        });
                    }
                });
            }

            // 字典项编辑
            function dictItemEdit(data) {
                layer.open({
                    type: 1,
                    area: ['500px'],
                    title: false,
                    title: '字典项编辑',
                    shade: 0.6,
                    shadeClose: true,
                    anim: 'slideLeft',
                    closeBtn: 2,
                    content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">

                                    <div class="layui-form-item layui-hide">
                                        <input type="text" name="id" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字典项文本</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="itemText" value="" lay-verify="required" placeholder="字典项文本" lay-reqtext="字典项文本必填"  autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字典编码</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="itemValue" value="" lay-verify="required" placeholder="字典编码" lay-reqtext="字典编码必填" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">描述</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="description"  placeholder="描述" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">排序</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="sortOrder"  placeholder="排序" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">         
                                        <label class="layui-form-label">状态</label>
                                        <div class="layui-input-block">                           
                                        <div class="layui-input-block" style="margin-left: 0;">
                                            <input type="checkbox" name="status" id="status" checked value="1" title="启用|禁用" lay-skin="switch">
                                        </div></div>
                                    </div>
            
                                    <div class="layui-form-item">
                                        <button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit lay-filter="dictItemUpdate">确认</button>
                                    </div>
                                </div>`,
                    success: function (layero, index, that) {
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        form.val('filter-test-layer', {
                            "id": data.id,
                            "itemText": data.itemText,
                            "itemValue": data.itemValue,
                            "description": data.description,
                            "sortOrder": data.sortOrder,
                            "status": data.status
                        });

                        // 表单提交事件
                        form.on('submit(dictItemUpdate)', function (data) {
                            // 获取表单字段值
                            var field = data.field;

                            // 获取复选框的值
                            var selectedValues = 1;
                            if ($('#status').is(':checked')) {
                                // 选中
                                selectedValues = 1;
                            } else {
                                // 未选中
                                selectedValues = 0;
                            }

                            var dictItemEditObj = {
                                id: field.id,
                                itemText: field.itemText,
                                itemValue: field.itemValue,
                                description: field.description,
                                sortOrder: field.sortOrder,
                                status: selectedValues
                            }

                            AjaxUtils.request(
                                {
                                    url: '/dict/item',
                                    type: 'POST',
                                    data: dictItemEditObj
                                }, function (data) {
                                    // 关闭弹层&刷新表格
                                    layer.close(index);

                                    // 重新加载表格
                                    table.reloadData('setDictItem', {
                                        page: {
                                            curr: 1
                                        }
                                    });
                                },
                                function (errMsg) {
                                    toast.error({
                                        message: errMsg,
                                    });
                                }
                            );
                            // 阻止默认 form 跳转
                            return false;
                        });
                    }
                });
            }

            //字典项详情
            function dictItemDetail(data) {
                layer.open({
                    type: 1,
                    area: ['500px'],
                    title: false,
                    title: '字典项查看',
                    shade: 0.6,
                    shadeClose: true,
                    anim: 'slideLeft',
                    closeBtn: 2,
                    content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">

                                    <div class="layui-form-item layui-hide">
                                        <input type="text" name="id" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字典项文本</label>
                                        <div class="layui-input-block">
                                        <input readonly type="text" name="itemText" value="" lay-verify="required" placeholder="字典项文本" lay-reqtext="字典项文本必填"  autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字典编码</label>
                                        <div class="layui-input-block">
                                        <input readonly type="text" name="itemValue" value="" lay-verify="required" placeholder="字典编码" lay-reqtext="字典编码必填" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">描述</label>
                                        <div class="layui-input-block">
                                        <input readonly type="text" name="description"  placeholder="描述" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">排序</label>
                                        <div class="layui-input-block">
                                        <input readonly type="text" name="sortOrder"  placeholder="排序" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">         
                                        <label class="layui-form-label">状态</label>
                                        <div class="layui-input-block">                           
                                        <div class="layui-input-block" style="margin-left: 0;">
                                            <input disabled type="checkbox" name="status" id="status" checked value="1" title="启用|禁用" lay-skin="switch">
                                        </div></div>
                                    </div>
                                </div>`,
                    success: function (layero, index, that) {
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        form.val('filter-test-layer', {
                            "id": data.id,
                            "itemText": data.itemText,
                            "itemValue": data.itemValue,
                            "description": data.description,
                            "sortOrder": data.sortOrder,
                            "status": data.status
                        });
                    }
                });
            }

            // 字典项删除
            function dictItemDel(data) {
                debugger
                layer.confirm('确定删除 [' + data.itemText + '] 么', function (index) {
                    layer.close(index);

                    AjaxUtils.request(
                        {
                            url: '/dict/item/' + data.id,
                            type: 'DELETE'
                        }, function (data) {
                            layer.msg('删除成功', { icon: 1 });
                            // 重新加载表格
                            table.reloadData('setDictItem', {
                                page: {
                                    curr: 1
                                }
                            });
                        },
                        function (error) {
                            toast.error({
                                message: error,
                            });
                        }
                    );
                });
            }


        });
    </script>
</body>

</html>